.learn__main {
  item {
    width: 70%;
    height: 70%;
    bottom: 15%;
    left: 15%;
    background-size: cover;
    position: absolute;
    transform: translate3d(0, 0, 0);
    z-index: 1;
    transition: all 1s;
  }

  @keyframes soft-hue {
    50% {
      filter: hue-rotate(-20deg);
    }
  }

  @keyframes soft-grow {
    50% {
      transform: scale(1.08);
    }
  }

  @keyframes apple-appear {
    0% {
      opacity: 0.5;
      transform: scale(0) rotate(-360deg);
    }

    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
  }

  .apple {
    background-image: url(../images/learn/star.png);
    animation: 0.6s ease-in-out 0s 1 forwards apple-appear, 1.7s ease-in-out 0.7s infinite none soft-grow,
      0.7s ease-in-out 0.7s infinite none soft-hue;
  }

  square.has-item.move-dest {
    background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%);
  }

  .cg-board square.move-dest.drag-over,
  .cg-board square.move-dest:hover {
    background: rgba(20, 85, 30, 0.3);
  }

  @keyframes slideIn {
    0% {
      opacity: 0;
      filter: blur(15px);
    }

    100% {
      opacity: 1;
      filter: blur(0px);
    }
  }

  @keyframes rankGlow {
    50% {
      background-color: rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 40px rgba(255, 255, 255, 0.7);
    }
  }

  .highlight-2nd-rank & .cg-board::after,
  .highlight-5th-rank & .cg-board::after,
  .highlight-7th-rank & .cg-board::after {
    width: 100%;
    height: 12.5%;
    content: '';
    position: absolute;
    bottom: 12.5%;
    left: 0;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.2);
    animation: 1s rankGlow ease-in-out infinite;
  }

  .highlight-7th-rank & .cg-board::after {
    top: 12.5%;
  }

  .highlight-5th-rank & .cg-board::after {
    top: 37.5%;
  }

  #promotion-choice .explanation {
    @extend %popup-shadow;

    background: $c-bg-popup;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 20px;

    h2 {
      font-size: 2em;
    }

    p {
      font-size: 1.3em;
      margin-top: 15px;
    }
  }

  .cg-board piece.wriggle::after {
    content: '!';
  }

  .cg-board piece.wriggle::after {
    content: '!';
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.8) 0 0 3px;
  }

  .piece-values .cg-board piece::before {
    position: absolute;
    top: 14px;
    right: 4px;
    color: #fff;
    text-shadow: 0 0 9px rgba(0, 0, 0, 1), 0 0 4px rgba(0, 0, 0, 1);
    font-size: 30px;
    font-weight: bold;
  }

  .piece-values .cg-board piece.queen::before {
    content: '9';
  }

  .piece-values .cg-board piece.rook::before {
    content: '5';
  }

  .piece-values .cg-board piece.bishop::before,
  .piece-values .cg-board piece.knight::before {
    content: '3';
  }

  .piece-values .cg-board piece.pawn::before {
    content: '1';
  }
}
// Workaround for chessground 4.4 used in `ui/learn` page.
// This selector has no effect for chessground 7.11.0 used in other pages.
cg-container > cg-board > svg {
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: z('cg__svg.cg-shapes');
  opacity: 0.6;

  image {
    opacity: 0.5;
  }
}
